<template>
	<view class="uni-wrap page">
			<uni-section class="mb-10" :title="item.title" v-for="(item,index) in datas" :key="index" @click="xq(item)">
				<template v-slot:right>
					{{item.createDate}}
				</template>
				<view  class="content">
					{{item.contents}}
				</view>
			</uni-section>
			<u-loadmore :status="status" :loadmoreText="loadmoreText" @loadmore="loadmore" />
	</view>
</template>
<script>
	import {
		mssageList
	} from '@/api/common.js';
	export default {
		name: "newsContent",
		data() {
			return {
				status: 'loadmore',
				loadmoreText: '点击加载更多',
				datas:[],
				page: 0,
				pageCount: 10,
			};
		},
			onLoad: function(option) {
			this.getnotice()
		},
		onReachBottom() {
			this.status = 'loading';
			console.log('触发上拉加载：' + this.status)
			this.page++;
				this.getnotice()
		},
		methods:{
			loadmore() {
				console.log('触发加载：' + this.status)
				this.page++;
					this.getnotice()
			},
			getnotice(){
				mssageList({
					pageSize: this.pageCount,
					page: this.page
			}).then(res => {
			console.log('查结果: ' + JSON.stringify(res));
			if (res.records.length > 0){
				res.records.forEach(item =>{
					 this.datas.push(item)
				})
			}
			if (res.hasNext == false) {
				this.status = 'nomore';
			}
			}).catch(err => {
			console.log(err);
			uni.showToast({
			title: err,
			icon: 'none'
			});
		})	
			},
			xq(item){
				uni.navigateTo({
				url: '/pages/msg/info?item=' + JSON.stringify(item)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
  $uni-success: #18bc37 !default;

	.uni-wrap {
		flex-direction: column;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		flex: 1;
	}

	.mb-10 {
		margin-bottom: 10px;
		background-color: #f5f5f5;
	}

  .decoration{
    width: 6px;
    height: 6px;
		margin-right: 4px;
    border-radius: 50%;
		background-color: $uni-success;
  }
  .content{
  	height: 25px;
  	line-height: 25px;
  	font-size: 13px;
  	color: #000000;
  	border-collapse: collapse;
  	    width: 80%;
  	    table-layout: fixed;
  	white-space: nowrap;
  	    overflow: hidden;
  	    text-overflow: ellipsis;
  }
</style>
